<template>
  <up-navbar
      leftText="返回"
      :bgColor="bgColor"
      :title="props.title"
      :titleStyle="titleStyle"
  >
    <template #left>
      <view class="u-nav-slot">
        <up-icon
            @click="back"
            name="arrow-left"
            size="19"
        ></up-icon>
        <up-line
            direction="column"
            :hairline="false"
            length="16"
            margin="0 8px"
        ></up-line>
        <up-icon @click="toTab('/pages/index/index')"
                 name="home"
                 size="20"
        ></up-icon>
      </view>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </up-navbar>
</template>
<script lang="ts" setup>
import {toTab, back} from "@/util/router/router";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  bgColor: {
    type: String,
    default: '#fff'
  },
  titleStyle:{
    type:Object,
    default:()=>{}
  }
})

</script>

<style scoped lang="scss">
.u-nav-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx #c4c3c3;
  padding: 3px 7px;
  opacity: 0.8;
}
</style>